<script setup>
import { defineProps, nextTick, onMounted, ref, watch } from 'vue';

const textareaRef = ref(null);
const rows = ref(1);
const emit = defineEmits(['update:modelValue', 'clickIcon', 'focus', 'blur', 'keyup']);

const props = defineProps({
  modelValue: { type: [String, Number], default: '' },
  label: { type: String, default: '' },
  placeholder: { type: String, default: '' },
  icon: Boolean,
  warn: Boolean,
  border: Boolean,
  multiline: { type: Boolean, default: true },
  readonly: { type: Boolean, default: true },
  iconColor: { type: String, default: '#000' },
  type: { type: String, default: 'text' },
  iconSize: { type: String, default: '12' },
  fontSize: { type: String, default: '16' }
});
/*参考vant组件库中的field组件*/
const adjustTextareaSize = () => {
  if (!props.multiline) return;
  const { value: textarea } = textareaRef; // 修改这里，使用解构赋值
  if (!textarea) return;
  textarea.style.height = 'auto';
  const height = textarea.scrollHeight;
  requestAnimationFrame(() => {
    if (height) {
      textarea.style.height = Math.max(height, 30) + 'px';
    }
  });
};

onMounted(() => {
  nextTick(adjustTextareaSize);
});

// 监听内容
watch(
  () => props.modelValue,
  () => {
    if (props.multiline) {
      // 仅在多行模式下执行
      nextTick(adjustTextareaSize);
    }
  },
  { immediate: true }
);

const handleChange = (e) => {
  emit('update:modelValue', e.target.value);
};
</script>

<template>
  <div class="component" :style="{ borderBottom: border ? '1px solid #ebeef5' : '', fontSize: `${fontSize}px` }">
    <div class="content">
      <div class="left_warn">
        <div v-if="warn" class="warn">*</div>
      </div>
      <span class="label">{{ label }}</span>
      <template v-if="multiline">
        <textarea
          class="textarea"
          ref="textareaRef"
          :class="[readonly ? 'read' : 'dis_read']"
          :rows="rows"
          :readonly="readonly"
          :value="modelValue"
          :placeholder="readonly ? '' : placeholder"
          @input="handleChange"
          @focus="emit('focus')"
          @blur="emit('blur')"
          @keyup="emit('keyup', $event)"
          :type="type"
          :style="{ fontSize: `${fontSize}px` }"
        />
      </template>
      <template v-else>
        <input
          class="textarea"
          ref="textareaRef"
          :class="[readonly ? 'read' : 'dis_read']"
          :readonly="readonly"
          :value="modelValue"
          :placeholder="readonly ? '' : placeholder"
          @input="handleChange"
          @focus="emit('focus')"
          @blur="emit('blur')"
          @keyup="emit('keyup', $event)"
          :type="type"
          :style="{ fontSize: `${fontSize}px` }"
        />
      </template>
      <div class="right_icon" v-if="icon">
        <span class="icon" :style="{ width: `${iconSize}px`, height: `${iconSize}px`, color: `${iconColor}` }" @click="emit('clickIcon')" />
      </div>
      <!-- 独立的右侧插槽 -->
      <div class="right_slot">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="border_bottom" style="margin-top: 5px" v-if="border"></div>
  </div>
</template>

<style scoped lang="less">
.component {
  width: 100%;
  position: relative;
  font-size: var(--font-size-base);

  .content {
    min-height: 40px;
    display: flex;
    align-items: center;
    outline: none;
    border: none;

    .right_slot {
      display: flex; // 使用flex布局
      align-items: center; // 垂直居中
      padding: 0 5px; // 与图标保持一致间距
    }

    .left_warn {
      width: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      .warn {
        color: red;
        font-size: 25px;
        padding-top: 10px;
      }
    }

    .right_icon {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 5px;

      .icon {
        width: 10px;
        height: 10px;
        font-weight: bold;
        transform: rotate(45deg);
        border-right: #000 solid 1.5px;
        border-top: #000 solid 1.5px;
      }
    }

    .label {
      color: var(--font-color);
      padding-right: 8px;
    }

    .textarea {
      flex: 1;
      border-radius: 5px;
      padding: 6px 8px;
      margin: 5px 0;
      display: flex;
      align-items: center;
      border: none;
      resize: none;
      outline: none;
      color: var(--font-color);
      transition:
        background-color 0.3s ease,
        color 0.3s ease; // 添加过渡效果
    }

    .textarea::placeholder {
      color: var(--font-color);
      font-size: var(--font-size-base);
    }

    .dis_read {
      font-weight: normal;
      text-align: center;
      background: var(--bg-input);
      color: var(--font-color);
    }

    .read {
      font-weight: normal;
      text-align: end;
      background: var(--bg-color);
    }
  }

  .border {
    width: 95%;
    margin: 0 2%;
    border-bottom: var(--bg-divider) 1px solid;
  }
}
</style>
